<template>
	<view id="mineBar">
		<view class="addTopic">
			<view class="information">
				<view class="head">
					<image :src="imgSrc" mode="" class="image"></image>
				</view>
				<view class="head_detail">
					<view class="head_name">
						{{username}}
					</view>
					<view class="head_hot">
						经验条
					</view>
				</view>
				<view class="editInformation" @tap="modifyInformation()">
					编辑信息
				</view>
			</view>
			<view class="middle">
				<view class="middle_left">
					我的签名：我最牛逼
				</view>
			</view>
			<view class="switchOver">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'MineBar',
		components: {
		},
		data() {
			return {
				username: '登录用户',
				imgSrc: '',
				token: ''
			}
		},
		created() {
			uni.getStorage({
				key: 'login',
				success:(e) => {
					this.username = e.data.username
					this.imgSrc = e.data.imgSrc
					this.token = e.data.token
				}
			})
		},
		methods: {
			modifyInformation() {
				uni.navigateTo({
					url: "../../pages/mine/MineItem/ModifyInformation"
				})
			}
		}
	}
</script>
	
<style>
	.addTopic{
		width: 93%;
		background-color: #CFE4FF;
		margin: 20.27rpx auto 0 auto;
		border-radius: 27.27rpx;
	}
	.information{
		display: flex;
		height: 135rpx;
	}
	.head{
		width: 100rpx;
		height: 100rpx;
		background-color: #fff;
		font-size: 40rpx;
		border-radius: 50%;
		line-height: 100rpx;
		text-align: center;
		margin: 20rpx 0 20rpx 21.81rpx;
	}
	.head .image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.head_detail{
		margin-left: 10rpx;
	}
	.head_name{
		font-size: 32rpx;
		margin-top: 45rpx;
	}
	.head_hot{
		margin-top: 10rpx;
		font-size: 18rpx;
	}
	.editInformation{
		position: absolute;
		height: 60rpx;
		width: 120rpx;
		font-size: 20rpx;
		border-radius: 27.27rpx;
		background-color: #62A7FF;
		color: #fff;
		right: 45rpx;
		text-align: center;
		line-height: 60rpx;
		margin-top: 50rpx;
	}
	.middle{
		display: flex;
		text-align: center;
		margin-bottom: 18rpx;
	}
	.middle_left{
		font-size: 24rpx;
		margin-left: 30.36rpx;
	}
	.switchOver{
		color: #777777;
	}
</style>
